var left, right, mask
window.onload = function () {
    left = document.getElementsByClassName('left')[0]
    right = document.getElementsByClassName('right')[0]
    mask = document.getElementsByClassName('mask')[0]
    bigImg = document.getElementsByClassName('bigimg')[0]
    left.onmouseover = function () {
        mask.style.display = 'block'
        right.style.display = 'block'
    }
    left.onmouseout = function () {
        mask.style.display = 'none'
        right.style.display = 'none'
    }
    left.onmousemove = function (e) {
        var event = e || window.event
        var disLeft = event.clientX - left.offsetLeft - mask.offsetWidth / 2
        var disTop = event.clientY - left.offsetTop - mask.offsetHeight / 2
        if (disLeft <= 0) disLeft = 0
        if (disTop <= 0) disTop = 0
        if (disLeft >= left.offsetWidth - mask.offsetWidth) disLeft = left.offsetWidth - mask.offsetWidth
        if (disTop >= left.offsetHeight - mask.offsetHeight) disTop = left.offsetHeight - mask.offsetHeight
        bigImg.style.left = -disLeft * (right.offsetWidth / mask.offsetWidth) + 'px'
        bigImg.style.top = -disTop * (right.offsetHeight / mask.offsetHeight) + 'px'
        mask.style.top = disTop + 'px'
        mask.style.left = disLeft + 'px'
    }
}